<template>
  <div class="custom-tree-container">
    <div class="block">
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <el-button type="primary" @click="open()">新增分类</el-button>
      <el-tree
        :data="data"
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
        :render-content="renderContent"
      ></el-tree>

      <el-dialog title="添加分类" :visible.sync="dialogFormVisible">
        <el-form :model="subjectform">
          <el-form-item label="分类" :label-width="formLabelWidth">
            <el-select v-model="subjectform.id" placeholder="请选择分类">
              <el-option label="收入" value="1"></el-option>
              <el-option label="支出" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="二级分类" :label-width="formLabelWidth">
            <el-input v-model="subjectform.label" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click=addsubject()>确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import subjectApi from "@/api/detailed/subject";

let id = 1000;
export default {
  data() {
    const data = [];
    return {
      dialogFormVisible: false,
      filterText: "",
      defaultProps: {
        children: "children",
        label: "label"
      },
      subjectform: {
        id: "",
        label: ""
      },
      formLabelWidth: "120px",
      data: JSON.parse(JSON.stringify(data)),
      data: JSON.parse(JSON.stringify(data))
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree2.filter(val);
    }
  },
  created() {
    this.getsubject();
  },
  methods: {
    addsubject() {
      subjectApi.addsubject(this.subjectform).then(res => {
        this.dialogFormVisible = false;
        this.getsubject();
        this.subjectform={}
      });
    },
    open() {
      this.dialogFormVisible = true;
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    getsubject() {
      subjectApi.getsubject().then(res => {
        this.data = res;
      });
    },
    append(data) {
      this.dialogFormVisible = true;
    },
    remove(node, data) {
      this.$confirm("此操作将永久删除该分类, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        //点击确定，执行删除方法
        //执行删除方法
        subjectApi.removesubject(data.id).then(response => {
          this.$message({
            type: "success",
            message: "删除成功!"
          }),
            //回到列表页面，刷新
            (this.dialogFormVisible = false);
          this.getsubject();
        });
      });
      console.log("node", node);
      console.log("data", data);
    },

    renderContent(h, { node, data, store }) {
      return (
        <span class="custom-tree-node">
          <span>{node.label}</span>
          <span>
            <el-button
              size="mini"
              type="text"
              on-click={() => this.remove(node, data)}
            >
              删除
            </el-button>
          </span>
        </span>
      );
    }
  }
};
</script>

<style>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>